<template>
  <div class="wrap">
    <headerPrint  type="SOC"/>
    <div class="print"  id="printWrapId">
      <div class="tLogo"><img class="logo" src="~images/icon.jpg" alt=""></div>
      <div class="head-title">
        Capital Expenditure Request Form
      </div>
      <div class="head-wrap">
        <ul>
          <li><span class="label">Date applied:</span><span class="ipt">{{ flows.submitTime }}</span></li>
          <li><span class="label">Department:</span><span class="ipt">{{ cvInfo.cvDepartmentId }}</span></li>
          <li><span class="label">Department Cost center:</span><span class="ipt">{{ cvInfo.departmentCostCenter }}</span></li>
          <li><span class="label">(Of department depreciation should be charged to)</span></li>
        </ul>
        <ul class="r">
          <li><span class="label">CER Number </span><span class="ipt">{{ cvInfo.cerNumber }}</span></li>
          <li><span class="label">PR#</span><span class="ipt">{{ info.prNo }}</span></li>
          <li><span class="label">Location:</span><span class="ipt">{{ cvInfo.location }}</span></li>
          <li><span class="label">(In KS park or other location)</span></li>
        </ul>
      </div>
      <div class="ipt-content-wrap">
        <div class="bg-head"><span>Business Purpose</span></div>
        <ul>
          <li style="width: 416px">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.businessPurpose,'Manufacturing Process Deveopment')}"></span>
            <span class="label">Manufacturing Process Deveopment</span>
          </li>
          <li style="width: 533px">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.businessPurpose,'New Product/Component implementation')}"></span>
            <span class="label">New Product/Component implementation</span>
          </li>
          <li>
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.businessPurpose,'Capacity Expansion')}"></span>
            <span class="label">Capacity Expansion</span>
          </li>
          <li class="bp">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.businessPurpose,'Facilities')}"></span>
            <span class="label">Facilities</span>
          </li>
          <li class="bp">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.businessPurpose,'Cost Reduction')}"></span>
            <span class="label">Cost Reduction</span>
          </li>
          <li class="bp">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.businessPurpose,'Safety/Quality')}"></span>
            <span class="label">Safety/Quality</span>
          </li>
          <li class="bp" style="width: 325px;">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.businessPurpose,'Information Technology')}"></span>
            <span class="label">Information Technology</span>
          </li>
          <li class="bp">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.businessPurpose,'Other')}"></span>
            <span class="label">Other</span>
          </li>
        </ul>
      </div>
      <div class="ipt-content-wrap">
        <div class="bg-head"><span>Acquisition Method</span></div>
        <ul>
          <li class="bp1">
            <span class="radio-br"  :class="{selectActive: isActiveCurrent(cvInfo.acquisitionMethod,'Build')}"></span>
            <span class="label">Build</span>
          </li>
          <li class="bp1">
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cvInfo.acquisitionMethod,'New Purchase')}"></span>
            <span class="label">New Purchase</span>
          </li>
          <li class="bp1">
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cvInfo.acquisitionMethod,'Fixed Assets Improvement')}"></span>
            <span class="label">Fixed Assets Improvement</span>
          </li>
          <li class="bp1">
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cvInfo.acquisitionMethod,'Direct Replacement')}"></span>
            <span class="label">Direct Replacement</span><br/>
            <span style="padding-left: 63px;font-size: 10px" class="label">Age of replaced equipment (&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) Year(s)</span>
          </li>
        </ul>
      </div>
      <div class="ipt-content-wrap">
        <div class="bg-head"><span>Capital Categories:</span></div>
        <ul>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.capitalCategories,'Machines and Equipment_NPCI')}"></span>
            <span class="label">Machines and Equipment_NPCI</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.capitalCategories,'Machines and Equipment_Productivity')}"></span>
            <span class="label">Machines and Equipment_Productivity</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.capitalCategories,'Machines and Equipment_Sourcing')}"></span>
            <span class="label">Machines and Equipment_Sourcing</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.capitalCategories,'Land & Building')}"></span>
            <span class="label">Land & Building</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.capitalCategories,'Computer Hardware (IT Infrastructure)')}"></span>
            <span class="label">Computer Hardware (IT Infrastructure)</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.capitalCategories,'Software')}"></span>
            <span class="label">Software</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.capitalCategories,'Facility (including furniture)')}"></span>
            <span class="label">Facility (including furniture)</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.capitalCategories,'Other Equipment（include Tooling)')}"></span>
            <span class="label">Other Equipment（include Tooling)</span>
          </li>
          <li class="bp2">
            <span class="radio-br" :class="{selectActive: isActiveIncludesCurrent(cvInfo.capitalCategories,'Other Intangible Assets')}"></span>
            <span class="label">Other Intangible Assets</span>
          </li>
        </ul>
      </div>
      <div class="ipt-content-wrap">
        <div class="bg-head"><span>Acquisition Method</span></div>
        <ul>
          <li style="width: 360px;">
            <span class="label">Is the item included in capital budget</span>
          </li>
          <li style="width: 146px;">
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cvInfo.inCapitalBudget,1)}"></span>
            <span class="label">YES</span>
          </li>
          <li>
            <span class="radio-br" :class="{selectActive: isActiveCurrent(cvInfo.inCapitalBudget,0)}"></span>
            <span class="label">NO</span>
          </li>
        </ul>
      </div>
      <div class="ipt-content-wrap">
        <div class="bg-head"><span>Project Short Description:</span></div>
        <p class="pTextarea" v-html="cvInfo.projectShortDescription"></p>
      </div>
      <div class="ipt-content-wrap department">
        <div class="label label-title"><span style="margin-left: 3px;">Application department</span></div>
        <ul class="info-wrap">
          <li style="margin-left: 60px;">
            <span class="label">Requested by:</span>
            <span class="iptImage" style="width: 180px;padding-top: 44px;height: 20px;">
<!--                <img :src="getCurrentUser(userList,null)['signPath']" alt="">-->
                {{cvInfo.requestedBy}}
            </span>
            <span class="label">Date:{{cvInfo.cvCreateTime}}</span>
          </li>
          <li style="margin-right: 60px;margin-left:30px;">
            <span class="label" style="opacity: 0">-</span>
            <span class="ipt" style="width: 60px;">{{cvInfo.ext}}</span>
            <span class="label">Ext.</span>
          </li>
          <li style="margin-right: 240px">
            <span class="label">Agreed by Dept Manager: </span>
            <span class="iptImage" style="width: 180px;"></span>
            <span class="label">Date:</span>
          </li>

          <li>
            <span class="label">Agreed by Dept Director: </span>
            <span class="iptImage" style="width: 180px;">
<!--                <img :src="getCurrentUser(userList,'Project HoD')['signPath']" alt="">-->
                 <approvalSingleUser :list="info.cvApprovalInfos" progressCode="Project HoD"></approvalSingleUser>
            </span>
            <span class="label">Date:{{getApprovalUserInfo(info.cvApprovalInfos,'Project HoD')['createTime']}}</span>
          </li>
        </ul>
      </div>
      <div class="ipt-content-wrap table-list">
        <div class="label label-title"><span style="margin-left: 3px;">Individual Asset description, quantity and type (Or see appendix, quotation list)</span>
        </div>
        <ul class="table">
          <li class="label">Items</li>
          <li class="label">Description</li>
          <li class="label">Type</li>
          <li class="label">Vendor</li>
          <li class="label">Quantity</li>
          <li class="label">Currency</li>
          <li class="label">Quotation Cost</li>
        </ul>
        <ul class="table" v-for="(item,index) in cvDetails" :key="index">
          <li>{{ index + 1 }}</li>
          <li class="ipt">{{ item.description }}</li>
          <li class="ipt">{{ item.type }}</li>
          <li class="ipt">{{ item.vendor }}</li>
          <li class="ipt">{{ item.quantity }}</li>
          <li class="ipt">{{ item.currency }}</li>
          <li class="ipt">{{ item.quotationCost }}</li>
        </ul>
        <div class="end-wrap">
          <span class="label">Total Capital without tax:</span>
          <span class="number">{{formatQuotationCost()}}</span>
        </div>
        <div class="label label-title"><span style="margin-left: 3px;">Sourcing / IT department</span></div>
        <ul class="info-wrap">
          <li style="padding-left: 60px;">
            <span class="label">Checked by Sourcing Engineer:</span>
            <span class="iptImage" style="width: 180px;height: 20px;padding-top: 44px;">
<!--                <img :src="getCurrentUser(userList,'Sourcing Engineer')['signPath']" alt="">-->
<!--                 <approvalSingleUser :list="info.cvApprovalInfos" progressCode="Sourcing Engineer"></approvalSingleUser>-->
                {{cvInfo.sourcingEngineer}}
            </span>
            <span class="label">Date:{{cvInfo.sourcingEngineerTime}}</span>
          </li>
          <li>
            <span class="label">Agreed by  Sourcing Manager:</span>
            <span class="iptImage" style="width: 300px;">
                 <approvalSingleUser :list="info.cvApprovalInfos" progressCode="Sourcing Manager"></approvalSingleUser>
            </span>
            <span class="label">Date:{{getApprovalUserInfo(info.cvApprovalInfos,'Sourcing Manager')['createTime']}}</span>
          </li>
          <li>
            <span class="label">Agreed by Sourcing Director:</span>
            <span class="iptImage" style="width: 180px;">
                <approvalSingleUser style="margin-left: 10px" :list="info.cvApprovalInfos" progressCode="Sourcing Director"></approvalSingleUser>
            </span>
            <span class="label">Date:{{getApprovalUserInfo(info.cvApprovalInfos,'Sourcing Director')['createTime']}}</span>
          </li>
        </ul>
      </div>
      <div class="ipt-content-wrap approval">
        <div class="bg-head"><span>Approval </span></div>
        <div class="br">
          <div style="padding: 3px;">
            <p class="label label-title underline">Fiannce department</p>
            <ul class="info-wrap">
              <li>
                <div>
                  <span class="">Budget This Year:</span>
                  <span class="ipt" style="width: 180px;padding-top: 30px;">{{cvInfo.budgetThisYear}}</span>RMB
                </div>
                <div style="padding-top: 10px;">
                  <span class="">Budget Bal. Bf. Aprroval:</span>
                  <span class="ipt" style="width: 180px;;padding-top: 30px;">{{cvInfo.budgetBalBfApproval}}</span>RMB
                </div>
              </li>
              <li>
                <span class="label">Checked by Controlling team:</span>
                <span class="iptImage" style="width: 180px;">
<!--                    <img :src="getCurrentUser(userList,'Controlling Team')['signPath']" alt="">-->
                    <approvalSingleUser :list="info.cvApprovalInfos" progressCode="Controlling Team"></approvalSingleUser>
                </span>
                <span class="label">Date:{{getApprovalUserInfo(info.cvApprovalInfos,'Controlling Team')['createTime']}}</span>
              </li>
              <li>
                <span class="label">Approved by Financial Director:</span>
                <span class="iptImage" style="width: 180px;">
<!--                    <img :src="getCurrentUser(userList,'Financial Director')['signPath']" alt="">-->
                     <approvalSingleUser :list="info.cvApprovalInfos" progressCode="Financial Director"></approvalSingleUser>
                </span>
                <span class="label">Date:{{getApprovalUserInfo(info.cvApprovalInfos,'Financial Director')['createTime']}}</span>
              </li>
            </ul>
          </div>


          <div class="btm-br">
            <p class="label label-title underline">Management approval</p>
            <ul class="info-wrap">
              <li>
                <span class="label">General Manager/<br/>Supply Chain BU Operation Director </span>
                <span class="iptImage" style="width: 180px;">
<!--                    <img :src="getCurrentUser(userList,'GM')['signPath']" alt="">-->
                     <approvalSingleUser :list="info.cvApprovalInfos" progressCode="GM"></approvalSingleUser>
                </span>
                <span class="label">Date:{{getApprovalUserInfo(info.cvApprovalInfos,'GM')['createTime']}}</span>
              </li>
              <li style="margin-right: 200px;width: 174px;"/>
              <li>
                <span class="label">Senior Vice President:</span>
                <span class="iptImage" style="width: 180px;">
<!--                    <img :src="getCurrentUser(userList,'SVP')['signPath']" alt="">-->
                    <approvalSingleUser :list="info.cvApprovalInfos" progressCode="SVP"></approvalSingleUser>
                </span>
                <span class="label">Date:{{getApprovalUserInfo(info.cvApprovalInfos,'SVP')['createTime']}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <p class="label">Note: Net Present Value of CF must be filled for significant CAPEX.</p>
    </div>
  </div>
</template>


<script>
import headerPrint from './header'
import mixins from "@/views/devBasic/capex/print/mixins";
import approvalSingleUser from "@/views/devBasic/capex/print/approvalSingleUser.vue";
export default {
  name: "capital",
  mixins:[mixins],
  components: {headerPrint,approvalSingleUser},
  data(){
    return{
      info: (this.$store.state.capex || {})['SOC'+this.$route.query.id] || {},
      cvInfo:{},
      flows:{},
      cvDetails:[],
      userList:[]
    }
  },
  async mounted() {
    this.cvInfo = this.info.cvInfo || {};
    this.cvDetails = this.info.cvDetails || [];
    this.flows = this.getCurrentApproval(this.info.flows,'Confirm Vendor')
    // const userList  = await this.getApproval(this.info.id,['Confirm Vendor','Confirm Vendor Approval'])
    // this.userList = userList
  },
  methods:{
    // getCurrentApproval(list, code) {
    //   if (!(Array.isArray(list) && list.length > 0)) return {}
    //   return list.find(item => item.progressCode == code) || {}
    // },
    isActiveCurrent(str1,str2){
      return str1 == str2
    },
    isActiveIncludesCurrent(str1,str2){
        if(!str1) return false;
      const arr= str1.split(',')
      return arr.includes(str2)
    },
    formatQuotationCost(){
      let total = 0
      this.cvDetails.forEach(item=>{
        if (item.quantity && item.currency){
          item.quotationCost = item.quantity * item.currency
        }else{
          item.quotationCost = ""
        }
        total = total + (item.quotationCost || 0)
      })

      return String(total).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";

.print {
  width: 1320px;
}

//@media print {
  .print {
    transform: scale(.9, .9);
    transform-origin: left top;
    padding: 32px;
    padding-top: 80px !important;

  }
  .tLogo{
    display: inline-block;
    z-index: 111;
    -webkit-print-color-adjust: exact;
  }
//}

.head-title {
  text-align: center;
  background-color: rgba(92, 111, 123, 1) !important;
  font-weight: bold;
  font-size: 26px;
  line-height: 40px;
  color: #FFFFFF !important;
  -webkit-print-color-adjust: exact;
  border: #000 solid 1px;
}

.label {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  line-height: 20px;
  padding: 0;
  margin: 0;
  border: none;
}

.desc {
  font-size: 14px;
  color: #333333;
}

.head-wrap {
  ul {
    display: inline-block;

    &.r {
      float: right;
      padding-right: 60px;
    }
  }

  li {
    margin-top: 10px;

    .label {
      width: 180px;
      display: inline-block;
      text-align: left;
      border: none;
    }

    .ipt {
      width: 180px;
      border-bottom: #333333 solid 1px;
      font-size: 13px;
      color: #333333;
      display: inline-block;
      font-weight: bold;
      padding-left: 3px;
      box-sizing: border-box;
    }
  }
}

.bg-head {
  background: rgba(217, 217, 217, 1) !important;
  -webkit-print-color-adjust: exact;
  span {
    padding-left: 3px;
    font-weight: bold;
    font-size: 14px;
    text-decoration: underline;
    color: #333333;
  }
}

.ipt-content-wrap {
  ul {
    padding: 7px 0 0 0;
  }

  li {
    display: inline-block;
    //padding-right: 90px;
    padding-bottom: 7px;
    vertical-align: top;

    &.bp {
      width: 208px;
    }

    &.bp1 {
      width: 262px;
    }

    &.bp2 {
      width: 360px;
    }

    .radio-br {
      width: 60px;
      height: 20px;
      border: #333 solid 1px;
      display: inline-block;
      vertical-align: bottom;
      margin-right: 3px;
    }


  }
}

.pTextarea {
  border: #333 solid 1px;
  min-height: 115px;
  margin: 5px 0;
  padding: 5px;
  font-size: 14px;
}

.department {
  border: #333 solid 1px;

  .info-wrap {

    li {
      display: inline-block;
      width: 180px;
      vertical-align: top;
      padding-bottom: 0;

      span {
        display: block;
        text-align: left;
      }
      .label{
        height: 20px;
      }

      .ipt {
        width: 180px;
        border-bottom: #333333 solid 1px;
        font-size: 13px;
        color: #333333;
        display: inline-block;
        font-weight: bold;
        padding-left: 3px;
        box-sizing: border-box;
        margin-top: 44px;
        height: 22px;
        line-height: 22px;
      }
    }
  }

  .label {

  }

  .label-title {
    text-decoration: underline;
  }
}
.iptImage{
  height: 40px;
  padding-top: 26px;
  border-bottom: #333333 solid 1px;
  font-size: 13px;
  color: #333333;
  display: inline-block;
  font-weight: bold;
  padding-left: 3px;
  box-sizing: content-box;
    text-align: center !important;
  img{
    height: 40px;
    width: auto;
    padding: 0;
  }
}
.table-list {
  border: #333 solid 1px;
  margin-top: 5px;

  .table {
    padding-left: 5px;
    margin-bottom: 0;
    padding-top: 0;
    margin-top: 0;
    padding-top: 0;

    li {
      color: #333333;
      display: inline-block;
      margin-right: 40px;
      border-radius: 0;

      &:nth-child(1) {
        width: 35px;
        text-align: left;
      }

      &:nth-child(2) {
        width: 120px;
        text-align: left;
      }

      &:nth-child(3) {
        width: 180px;
      }

      &:nth-child(4) {
        width: 360px;
      }

      &:nth-child(5) {
        width: 60px;
        text-align: right;
      }

      &:nth-child(6) {
        width: 60px;
        text-align: right;
      }

      &:nth-child(7) {
        width: 120px;
        text-align: right;
      }

      &.ipt {
        border-bottom: #333 solid 1px;
        padding-bottom: 1px;
        font-size: 14px;
        vertical-align: text-bottom;
      }
    }

  }

  .info-wrap {
    margin: 5px;
    padding-top: 0;

    li {
      display: inline-block;
      //width: 180px;
      vertical-align: bottom;
      margin-right: 200px;
      padding-bottom: 0;
      &:last-child{
        margin-right: 0;
      }

      span {
        display: block;
        text-align: left;
      }

      .ipt {
        width: 180px;
        border-bottom: #333333 solid 1px;
        font-size: 13px;
        color: #333333;
        display: inline-block;
        font-weight: bold;
        padding-left: 3px;
        box-sizing: border-box;
        padding-top: 35px;
        height: 20px;
      }
    }
  }
}

.approval {
  margin-top: 5px;
  .br {
    border: #333333 solid 1px;
    margin: 3px 0;
  }
  .btm-br{
    border-top: #333333 solid 1px;
    padding: 3px;
  }

  .info-wrap {
    margin: 5px;
    padding-top: 0;
    padding-left: 60px;

    li {
      display: inline-block;
      //width: 180px;
      vertical-align: bottom;
      margin-right: 200px;
      padding-bottom: 0;
      &:last-child{
        margin-right: 0;
      }
      span {
        display: block;
        text-align: left;
      }

      .ipt {
        width: 180px;
        border-bottom: #333333 solid 1px;
        font-size: 13px;
        color: #333333;
        display: inline-block;
        font-weight: bold;
        padding-left: 3px;
        box-sizing: border-box;
        padding-top: 66px;
      }
    }
  }
}

.end-wrap {
  text-align: right;
  padding-right: 74px;

  .number {
    border-bottom: #333333 solid 1px;
    width: 120px;
    display: inline-block;
    margin-left: 40px;
  }
}

</style>
